<route lang="json5">
{
  style: {
    navigationStyle: 'default',
    navigationBarTitleText: '查看农产品报价',
  },
}
</route>

<template>
  <view>
    <!--    <wd-action-sheet v-model="show" title="" @close="close">-->
    <view class="content-block-top">
      <view>{{ productInfo.name }}</view>
      <view class="content-block-top-right">
        <text>¥ {{ productInfo.amount }}/{{ productInfo.unit }}</text>
        <image
          style="width: 9px; height: 15px; margin-left: 4px"
          src="../../../static/images/arrow-up.png"
          mode=""
        ></image>
      </view>
    </view>
    <view class="content-block-time">
      <view>最新报价时间：{{ productInfo.create_time }}</view>
    </view>
    <view class="search-warp">
      <view class="date-warp">
        <wd-datetime-picker type="date" label="年月日" v-model="startDate" @confirm="handleConfirmStart" use-default-slot>
          <view class="time-picker">
            <!-- <wd-icon name="caret-down-small" color="#999999" size="32px"></wd-icon> -->
            <wd-icon name="calendar" color="#999999" size="14px"></wd-icon>
            <text>{{ params.start_date || '选择时间' }}</text>
          </view>
        </wd-datetime-picker>
      </view>
      <view class="date-line">-</view>
      <view class="date-warp">
        <wd-datetime-picker type="date" label="年月日" v-model="endDate" @confirm="handleConfirmEnd" use-default-slot>
          <view class="time-picker">
            <!-- <wd-icon name="caret-down-small" color="#999999" size="32px"></wd-icon> -->
            <wd-icon name="calendar" color="#999999" size="14px"></wd-icon>
            <text>{{ params.end_date || '选择时间' }}</text>
          </view>
        </wd-datetime-picker>
      </view>
    </view>
    <view class="line-warp">
      <!--      <uchartsLine></uchartsLine>-->
      <qiun-data-charts type="line" :opts="opts" :chartData="chartData" />
    </view>
    <view class="detail-contnet">
      <view class="detail-contnet-title">往期价格</view>
      <view class="detail-contnet-content" v-for="(item, index) in list" :key="index">
        <text class="left">￥{{ item.amount }}/{{ item.unit }}</text>
        <text class="right">{{ item.create_time }}</text>
      </view>
    </view>
    <!--    </wd-action-sheet>-->
  </view>
</template>

<script setup lang="ts">
import uchartsLine from '../../../components/ucharts-line.vue'
import { quoteDetail, quoteHistoryList } from '@/service/quote'
import { useToast } from 'wot-design-uni'
import {watchEffect} from "@vue/runtime-core";

const toast = useToast()
const show = ref(true)

const value = ref()
const productName = ref('')
const productId = ref<number>()
const list = ref<IQuoteHistory[]>([])
const params = reactive<IQuoteHistoryParams>({
  product_id: 0,
  start_date: '',
  end_date: '',
})
const getList = async () => {
  const res: IResData<IQuoteHistory[]> = await quoteHistoryList(params)
  if (res.code === 1) {
    list.value = res.data
    chartData.categories = res.data.map((item) => item.create_time)
    chartData.series[0].data = res.data.map((item) => item.amount)
  } else {
    toast.show(res.msg)
  }
}
const productInfo = ref<IQuote>({})
const getDetail = async () => {
  const res: IResData<IQuote> = await quoteDetail(params.product_id)
  if (res.code === 1) {
    productInfo.value = res.data
  } else {
    toast.show(res.msg)
  }
}
const startDate = ref('')
const endDate = ref('')
const pad = (num: number) => (num < 10 ? '0' + num : num)
const handleConfirmStart = ({ value }) => {
  // console.log(value, 'handleConfirmStart')
  const date = new Date(value)
  params.start_date = `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`
}
const handleConfirmEnd = ({ value }) => {
  // console.log(value, 'handleConfirmEnd')
  const date = new Date(value)
  params.end_date = `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`
}
watch(
  params,
  () => {
    if (params.start_date && params.end_date) {
      getList()
    }
  },
  { deep: true },
)
onLoad(async ({ id, name }) => {
  params.product_id = Number(id)
  productName.value = name
  await getDetail()
  await getList()
})
const close = () => {
  show.value = false
}
// 图表
const chartData = reactive({
  categories: [],
  series: [
    {
      name: '',
      linearColor: [
        [0, '#00E6BB'],
        [0.25, '#00B5FF'],
        [0.5, '#00D1ED'],
        [0.75, '#00E6BB'],
        [1, '#90F489'],
      ],
      data: [],
      markPoint: {
        data: [
          {
            type: 'max',
          },
          {
            type: 'min',
          },
        ],
      },
    },
  ],
})
const opts = ref({
  color: [
    '#3CA272',
    '#91CB74',
    '#FAC858',
    '#EE6666',
    '#73C0DE',
    '#3CA272',
    '#FC8452',
    '#9A60B4',
    '#ea7ccc',
  ],
  padding: [15, 10, 0, 15],
  dataLabel: false,
  dataPointShape: false,
  // enableScroll: false,
  legend: {},
  // xAxis: {
  //   disableGrid: true,
  //   // itemCount: 4,
  //   // axisLine: false,
  //   // scrollShow:true,
  //   // scrollAlign:'right'
  // },
  xAxis: {
    show: false, // 不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
    axisLine: false,
    disabled: true,
  },
  yAxis: {
    gridType: 'dash',
    // dashLength: 2,
    disableGrid: true,
    disabled: true,
    data: [
      {
        // min: 0,
        // max: 150
      },
    ],
  },
  extra: {
    line: {
      type: 'curve',
      width: 2,
      // activeType: "hollow",
      // linearType: "custom"
    },
  },
})
</script>

<style scoped lang="scss">
.search-warp {
  display: flex;
  align-items: center;
  margin: 0 15px;
  padding-bottom: 20px;
  margin-top: 10px;

  .date-warp {
    border-radius: 4px;
    opacity: 1;
    background: #f7f7f7;

    .time-picker {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 160px;
      height: 40px;

      text {
        font-size: 14px;
        color: #c0c4cc;
        margin-left: 2px;
      }
    }
  }

  .date-line {
    margin-left: 10px;
    margin-right: 10px;
  }
}

.content-block-top {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 15px;
  padding-bottom: 0px;

  .content-block-top-right {
    font-family: Source Han Sans;
    font-size: 14px;
    font-weight: 500;
    line-height: 26px;
    text-align: center;
    display: flex;
    align-items: center;
    letter-spacing: 0px;
    color: #333333;

    text {
      margin-left: 6px;
    }
  }
}

.content-block-time {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: Source Han Sans;
  font-size: 10px;
  font-weight: 350;
  line-height: 16.41px;
  letter-spacing: 0px;
  color: #999999;
  padding-left: 15px;
}

.line-warp {
  width: 100%;
  height: 200px;
}

.detail-contnet {
  padding: 15px;

  .detail-contnet-title {
    font-family: Source Han Sans;
    font-size: 14px;
    font-weight: normal;
    line-height: 16.41px;
    letter-spacing: 0px;
    color: #333333;
  }

  .detail-contnet-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 10px;
    opacity: 1;
    border-bottom: 1px solid rgba(216, 216, 216, 0.3);
    padding-bottom: 15px;

    .left {
      font-family: Source Han Sans;
      font-size: 14px;
      font-weight: 350;
      line-height: 16.41px;
      letter-spacing: 0px;
      font-variation-settings: 'opsz' auto;
      color: #333333;
    }

    .right {
      font-family: Source Han Sans;
      font-size: 14px;
      font-weight: 350;
      line-height: 16.41px;
      letter-spacing: 0px;
      font-variation-settings: 'opsz' auto;
      color: #666666;
    }
  }
}
</style>
